<template>
  <view class="container">
    <view class="tabs">
      <view
        :class="['tab', activeTab === 0 ? 'active' : '']"
        @click="activeTab = 0"
        >绘本</view
      >
      <view
        :class="['tab', activeTab === 1 ? 'active' : '']"
        @click="activeTab = 1"
        >绘本集</view
      >
    </view>
    <view v-if="activeTab === 0" class="book-list">
      <view v-for="(book, idx) in books" :key="book.id" class="book-card">
        <image :src="book.book.coverUrl" class="cover" />
        <!-- <view class="status">未读</view> -->
        <view class="delete-btn" @click="removeBook(book, idx)">🗑</view>
        <view class="title">{{ book.book.title }}</view>
      </view>
      <view v-if="books.length === 0" class="empty">--没有更多数据了--</view>
    </view>
    <view v-else class="book-list">
      <view v-for="(set, idx) in bookSets" :key="set.id" class="book-card">
        <image :src="set.cover" class="cover" />
        <view class="set-count">{{ set.count }}本</view>
        <view class="delete-btn" @click="removeBookSet(idx)">🗑</view>
        <view class="title">{{ set.title }}</view>
      </view>
      <view v-if="bookSets.length === 0" class="empty">--没有更多数据了--</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { http } from "@/utils/http";
import { showToast } from "@/utils/toast";
import { onMounted, ref } from "vue";
const activeTab = ref(0);
const page = ref(1);
const pageSize = ref(10);
const books = ref([]);
const bookSets = ref([
  { id: 1, title: "牛津树...", cover: "/static/images/book3.svg", count: 59 },
]);

onMounted(() => {
  getUserFavorites();
});

const getUserFavorites = async () => {
  let userId = uni.getStorage({
    key: "token",
    success: async (res) => {
      await http
        .get(
          `/admin-api/picturebook/favorites/page?&pageNo=${page.value}&pageSize=${pageSize.value}&userId=${res.data}`
        )
        .then((res) => {
          console.log(res.data.list);
          books.value = res.data.list;
        });
    },
  });
  console.log(userId);
};

function removeBook(book, idx: number) {
  http
    .delete(`/admin-api/picturebook/favorites/delete?BookId=${book.book.id}`)
    .then((res) => {
      books.value.splice(idx, 1);
      showToast("删除成功");
    });
}
function removeBookSet(idx: number) {
  bookSets.value.splice(idx, 1);
}
</script>

<style scoped>
.container {
  background: #fafafa;
  min-height: 100vh;
  padding: 0;
}
.tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  background: #fff;
}
.tab {
  flex: 1;
  text-align: center;
  padding: 18rpx 0 16rpx 0;
  font-size: 32rpx;
  color: #888;
  position: relative;
}
.tab.active {
  color: #1976d2;
  font-weight: bold;
  border-bottom: 4rpx solid #1976d2;
}
.book-list {
  display: flex;
  flex-wrap: wrap;
  padding: 32rpx 0 0 0;
  justify-content: flex-start;
  margin-inline: 48rpx;
  row-gap: 24rpx;
  column-gap: 36rpx;
}
.book-card {
  width: 140px;
  height: 180px;
  border-radius: 18px;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.06);
  padding: 16px 10px 12px 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 180px;
  background: linear-gradient(135deg, #fceabb 0%, #f8b500 100%);
  transition: box-shadow 0.2s;
  margin-bottom: 2px;
}
.book-card:last-child {
  margin-right: 0;
}
.cover {
  height: 140px;
  width: 100px;
  object-fit: contain;
  border-radius: 8px;
  margin-top: 8px;
  background: #fff;
}
.status,
.set-count {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 13px;
  border-radius: 10px;
  padding: 2px 12px;
  z-index: 2;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
}
.status.read,
.set-count.read {
  background: linear-gradient(90deg, #43cea2 0%, #185a9d 100%);
}
.delete-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 20px;
  color: #fff;
  background: #fff3;
  border-radius: 50%;
  padding: 2px 6px;
  cursor: pointer;
  z-index: 3;
}
.title {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 8px;
}
.book-en {
  font-size: 13px;
  color: #fff;
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.empty {
  width: 100%;
  text-align: center;
  color: #bbb;
  margin-top: 80rpx;
  font-size: 28rpx;
}
</style> 